<template>
    <div name='pager_add'>
          <link rel="stylesheet" href="../../static/css/b.css">
          <link rel="stylesheet" href="../../static/css/f.css">
        <body>
            <Header></Header>
            <section>
                <div class="mainwrapper">

                    <!-- 侧边栏 -->
                    <Sidebar></Sidebar>
                    <!-- /侧边栏 -->

                    <div class="mainpanel">
                        <div class="contentpanel">
                            <div class="row row-stat">

              <div class="viewFrameWork-body">
                <!-- loading -->
                <div class="spinner-wrapper hidden" id="spinnerLoading">
                    <div class="spinner">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>
                </div>

                <div class="body-wrapper">
                    <div class="body-content">
                        <div class="cont-r">
            <div role="tabpanel" class="tab-area tab-col4">
                <ul class="nav nav-tabs" role="tablist">
                      <li role="presentation" class="step3">
                        <a href="#createTest3" aria-controls="create3" role="tab" data-toggle="">
                             第一步:创建试卷
                            
                        </a>
                    </li>
                    <li role="presentation" class="active step1">
                        <a href="#createTest1" aria-controls="create1" role="tab" data-toggle="tab">
                           第二步:添加试题
                        </a>
                    </li>
                  
                    <li role="presentation">
                        <a href="#createTest4" aria-controls="create4" role="tab" data-toggle="">
                            第三步:发布考试
                        </a>
                    </li>
                </ul>

               

             <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="createTest1">
                            <div class="create-test-area new-test-aera clearfix">
                           
                               






























                <div class="row" style="height:100%;">
                    <div class="table-responsive">
                        <div class="el-table el-table--fit el-table--border el-table--scrollable-x el-table--enable-row-transition" 
                        style="width: 100%; height: 100%;">
                            <div class="el-table__header-wrapper">
                                
                                <table class="" style="width:97%; margin:0 auto;">
                                    <thead>
                                    <tr style="height:54px;">
                                        <th style="width:80px;">
                                         <input type='checkbox'  v-model='checked' @click='checkedAll'>
                                        </th>
                                   
                                        <th>考题内容</th>
                                        <th></th>
                                        <th>考题类型</th>
                                        <th>答案</th>
                                 
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    <tr v-for="item in data1" :key="item.id">
                                        <td>    
                                            <input type='checkbox' v-model='arr' :value="item.id"  @click="fn2()">
 
                                        </td>
                              
                                        <td>{{item.examination_name}}</td>
                                        <td></td>
                                        <td>{{item.examination_type.type_name}}</td>
                                        <td>{{item.examination_answer}}</td>
                                      
                                        <td>
                                            <div class="cell">
                                                <a  
                                                style="padding-right:5px;"> 
                                                    <i class="fa fa-sliders"></i>
                                                </a>
                                            
                                                <a href=""  @click.prevent="GetExamUserInfo(i.id);" 
                                                style="padding-left:5px;"> 
                                                    <i class="fa fa-list-alt"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                     
                                    </tbody>
                                    <tr>

                                        <td>
                                            <button   @click.prevent="de" class="btn btn-primary">
                                            下一步
                                        </button>
                                        
                                         </td>
                                         <td>&nbsp;&nbsp;<a href="http://localhost:8080/add_paper">没有题，点击此处添加...</a></td>
                               
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                       
                                </table>
                                
                                

                                  
                            </div><!---->
                    </div> <!-- table-responsive -->


                  
                    </div>
                </div>



                    </div>
                </div>
            </div>

                                        



                 
               
            </div>
        </div>
                    </div>
                </div>
            </div>


                            </div><!-- row -->
                        </div>
                        <!-- contentpanel -->
                    </div>
                    <!-- mainpanel -->
                </div>
                <!-- mainwrapper -->
            </section>
 
        </body>
    </div>
    
    
    
   
</template>

<script>
import axios from 'axios'
export default {
    name:'Paper_add_new',
    data() {
        return {
            final_exam_list:[],
            total:0,
            texts:'',
            count:0,
            showModal: false,
            fruits:[],
            i_ids:0,
            course:[],
            user_ids:[],
            data1:[],
            arr:[],
            checked: false,
        }
    },  
    mounted(){
        axios({
                url:this.$api+'/user/final_exam_first/?exam_id='+window.localStorage.getItem('exam_id'),
                method:'get',
            }).then(res=>{
                if(res.data.code==200){
                    this.final_exam_list = res.data.final_exam_list
                    this.total =  res.data.final_exam_list.exam_content*10
                    this.count = res.data.final_exam_list.exam_content
                    this.data1 = res.data.Examinatio_all
                }
            })
    },
   

    methods:{
        de(){
             axios({
                url:this.$api+'/user/all_examination_questions/',
                data:{'examination_questions_id':this.arr,'final_Exam_id':window.localStorage.getItem('exam_id')},
                method:'post',
            }).then(res=>{
                if(res.data.code==200){
                   window.localStorage.setItem('arr',this.arr)
                   alert('成功')
                   this.$router.push({path: '/examadmin_add'})
                }
            })
        },
    //神奇的setTimeout 伪装异步
        fn2(){
            setTimeout(() => console.log(this.arr))
        },
        checkedAll: function() {
            if (this.checked) {//实现反选
            this.arr = [];
            } else { //实现全选
            this.arr = [];
            this.data1.forEach( (item) => {
                this.arr.push(item.id);
            });
            }
            setTimeout(() => console.log(this.arr))
        }
        },
        watch: { //深度 watcher
            arr: {
                handler: function (val, oldVal) {
                if (this.arr.length === this.data1.length) {
                    this.checked=true;
                } else {
                    this.checked=false;
                }
                },
                deep: true
        }

        },
        

    }





</script>
